window.addEventListener('load', function() {
    // 鼠标经过离开控制左右移动按钮的显示与否
    var main_focus = document.querySelector('.main_left');
    var arrow_l = document.querySelector('.main_left .left_go');
    var arrow_r = document.querySelector('.main_left .right_go');
    var focus_width = main_focus.offsetWidth;
    var ceshi = document.querySelector('.ceshi');
    var timer;
    var flag = true; // 节流阀 利用回调函数控制点击播放速度
    
    main_focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
    });
    main_focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = window.setInterval(function() {
            arrow_r.click();
        }, 3000);
    });
    // 根据图片个数动态生成小圆点
    var ul = main_focus.querySelector('ul');
    var ol = main_focus.querySelector('ol');
    for(var i = 0; i<ul.children.length; i++) {
        // 创建小圆点
        var li = document.createElement('li');
        // 插入小圆点
        ol.appendChild(li);
        // 创建每个小li的索引号 通过添加属性
        li.setAttribute('index', i);


        // 给每个小li 小圆点绑定点击事件
        li.addEventListener('click', function() {
            // 清楚所有
            for(var k=0;k<ol.children.length;k++) {
                ol.children[k].className = '';
            }
            // 留下自己
            this.className = 'current';
            // 获得索引号
            var index = this.getAttribute('index');
            var step = -(index * focus_width);
            move(ul, step);
            num = index;
            yynum = index;
        });
    }
    // 第一个li添加类
    ol.children[0].className = 'current';
    // 拷贝一个小li 到ol的最后
    var first_li = ul.children[0].cloneNode(true);
    // 右侧按钮换图片功能
    var num = 0;
    var yynum = 0;
    ul.appendChild(first_li);

    // 右侧按钮点击后的所有任务 
    arrow_r.addEventListener('click', function() {
            if(flag) {
                flag = false;
                if(num == 4) {
                    ul.style.left = 0;
                    num = 0;
                }
                num++;
                var step = -num * focus_width;
                move(ul, step, () => {
                    flag = true;
                });
                // 小圆圈跟随右侧按钮
                yynum++;
                if(yynum == 4)  {
                    yynum = 0;
                }
                for(var j=0;j<ol.children.length; j++) {
                    ol.children[j].className = '';
                }
                ol.children[yynum].className = 'current';
            }
    });

    // 左侧按钮点击后的所有任务
    arrow_l.addEventListener('click', function() {
        if(flag) {
            flag = false;
            if(num == 0) {
                ul.style.left = -(ul.children.length-1) * focus_width + 'px';
                num = ul.children.length-1;
            }
            num--;
            move(ul, -(num * focus_width), () => {
                flag = true;
            });
            // 小圆圈跟随右侧按钮
            yynum--;
            if(yynum < 0)  {
                yynum = ul.children.length-2;
            }
            for(var j=0;j<ol.children.length; j++) {
                ol.children[j].className = '';
            }
            ol.children[yynum].className = 'current';
        }
    });

    // 定时器控制自动播放轮播图
    timer = window.setInterval(function() {
        arrow_r.click();
    }, 3000);

    // function flag_true() {
    //     flag = true;
    // }
    // var fouks_ul = document.querySelector('.main_left ul');
    // var index=1;
    // window.setInterval(function() {
    //     console.log(1);
    //     move(fouks_ul, -(index*main_fouks.style.width))
    // }, 1000);
})